<template>
    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" v-bind="$attrs" v-on="$listeners" @open="onOpen"
        @close="onClose" width="1000px">
        <el-row>
            <el-col class="cur-left">
                <div class="select-img">
                    <div class="bg-gray">
                        <i class="el-icon-circle-plus"></i>
                        <p>选择图片</p>
                    </div>
                </div>
                <div class="user-else-info">
                    <p class="last-login">上次登录：{{formData.upLoginTime}}</p>
                    <el-row>
                        <el-col :span="8">
                            <span>{{formData.loginCount}}</span>
                            <p>次数</p>
                        </el-col>
                        <el-col :span="8">
                            <span><i class="el-icon-warning-outline"></i></span>
                            <p>状态</p>
                        </el-col>
                        <el-col :span="8">
                            <span>13</span>
                            <p>消息</p>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col class="cur-right">
                <el-row :gutter="15">
                    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                        <el-col :span="24">
                            <el-form-item label="所属部门" prop="organize">
                                <el-cascader v-model="formData.organize" :options="organizeOptions"
                                    :props="organizeProps" :style="{width: '100%'}" placeholder="请选择所属部门" clearable>
                                </el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="登录账号" prop="loginAccount">
                                <el-input v-model="formData.loginAccount" placeholder="请输入登录账号" :maxlength="30"
                                    show-word-limit clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属角色" prop="role">
                                <el-select v-model="formData.role" multiple placeholder="请择选所属角色" clearable
                                    :style="{width: '100%'}" @change="$forceUpdate()">
                                    <el-option-group v-for="group in roleOptions" :key="group.label"
                                        :label="group.label">
                                        <el-option v-for="item in group.options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-option-group>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="登录密码" prop="loginPassWord">
                                <el-input v-model="formData.loginPassWord" placeholder="请输入登录密码" :maxlength="30"
                                    show-word-limit clearable show-password :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属岗位" prop="post">
                                <el-select v-model="formData.post" multiple placeholder="请选择所属岗位" clearable
                                    :style="{width: '100%'}" @change="$forceUpdate()">
                                    <el-option v-for="(item, index) in postOptions" :key="index" :label="item.label"
                                        :value="item.value" :disabled="item.disabled"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="fullName">
                                <el-input v-model="formData.fullName" placeholder="请输入姓名" :maxlength="20" clearable
                                    :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="手机号码" prop="mobile">
                                <el-input v-model="formData.mobile" placeholder="请输入手机号码" :maxlength="11" clearable
                                    :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="formData.sex" size="medium">
                                    <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                                        :disabled="item.disabled">{{item.label}}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="formData.email" placeholder="请输入邮箱" :maxlength="50" show-word-limit
                                    clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="状态" prop="status" required>
                                <el-switch v-model="formData.status" active-text="关闭后，则冻结用户，无法进行登录"></el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="描述" prop="summary">
                                <el-input v-model="formData.summary" type="textarea" placeholder="请输入描述"
                                    :maxlength="200" show-word-limit :autosize="{minRows: 2, maxRows: 3}"
                                    :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <div slot="footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="handelConfirm">确定</el-button>
                </div>
            </el-col>
        </el-row>
        <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    export default {
        inheritAttrs: false,
        components: {},
        props: [],
        data() {
            return {
                dialog: {
                    title: '添加用户',
                    visible: false
                },
                formData: {
                    id: undefined,
                    organize: [],
                    loginAccount: undefined,
                    role: [],
                    loginPassWord: undefined,
                    post: [],
                    fullName: undefined,
                    mobile: undefined,
                    sex: "男",
                    email: undefined,
                    status: true,
                    summary: undefined,
                    loginCount: 0
                },
                rules: {
                    organize: [{
                        required: true,
                        type: 'array',
                        message: '请至少选择一个所属部门',
                        trigger: 'change'
                    }],
                    loginAccount: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    role: [{
                        required: true,
                        message: '请择选所属角色',
                        trigger: 'change'
                    }],
                    loginPassWord: [{
                        required: true,
                        message: '请输入登录密码',
                        trigger: 'blur'
                    }],
                    post: [{
                        required: true,
                        message: '请选择所属岗位',
                        trigger: 'change'
                    }],
                    fullName: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }],
                    mobile: [{
                        required: true,
                        message: '请输入手机号码',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '性别不能为空',
                        trigger: 'change'
                    }],
                    email: [],
                    summary: [],
                },
                organizeOptions: [],
                roleOptions: [],
                postOptions: [],
                sexOptions: [{
                    "label": "男",
                    "value": "男"
                }, {
                    "label": "女",
                    "value": "女"
                }],
                organizeProps: {
                    "multiple": false,
                    "label": "label",
                    "value": "value",
                    "children": "children",
                    checkStrictly: true,
                    expandTrigger: 'hover'
                },
            }
        },
        computed: {},
        watch: {},
        created() { },
        mounted() { },
        methods: {
            onOpen() { },
            onClose() {
                this.$refs['elForm'].resetFields()
            },
            close() {
                this.dialog.visible = false
                this.$emit('update:visible', false)
            },
            handleAdd(m) {
                this.model(undefined);
                this.formData.id = undefined;
                this.dialog.title = '添加用户'
                this.dialog.visible = true
            },
            handelModify(record) {
                this.dialog.title = '编辑用户'
                this.dialog.visible = true
                this.model(record.id);
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    //this.close()
                    let _data = _.cloneDeep(this.formData)
                    _data.sex = this.formData.sex[0]
                    _data.organizeGroupId = this.formData.organize.join(',');
                    _data.organize = this.formData.organize[this.formData.organize.length - 1]
                    _data.role = this.formData.role.join(',')
                    _data.post = this.formData.post.join(',')
                    console.log(_data)
                    if (!this.formData.id) {
                        this.$api.sys.admin
                            .submit(_data)
                            .then(({ statusCode, data, message }) => {
                                if (statusCode == 200) {
                                    this.close()
                                    this.$emit('complete')
                                    this.$notify({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$notify({
                                        message: message,
                                        type: 'error'
                                    })
                                }
                            })
                            .catch(() => {
                                this.$notify({
                                    message: '服务连接错误',
                                    type: 'error'
                                })
                            })
                    } else {
                        this.$api.sys.admin
                            .modify(_data)
                            .then(({ statusCode, data, message }) => {
                                if (statusCode == 200) {
                                    this.close()
                                    this.$emit('complete')
                                    this.$notify({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$notify({
                                        message: message,
                                        type: 'error'
                                    })
                                }
                            })
                            .catch(() => {
                                this.$notify({
                                    message: '服务连接错误',
                                    type: 'error'
                                })
                            })
                    }
                })
            },
            model(id) {
                var _this = this
                this.$api.sys.admin
                    .model({ id: id })
                    .then(({ statusCode, data, message }) => {
                        if (statusCode == 200) {
                            _this.organizeOptions = data.organize
                            _this.postOptions = data.post
                            _this.roleOptions = data.role
                            if (id) {
                                //修改
                                this.$nextTick(() => {
                                    _this.formData = data.admin
                                    _this.formData.sex = data.admin.sex;
                                    _this.formData.role = data.admin.roleId.split(",");
                                    _this.formData.post = data.admin.postId.split(",");
                                    _this.formData.organize = data.admin.organizeGroupId.split(",");
                                    console.log(_this.formData)
                                })

                            } else {
                                //添加
                            }
                        } else {
                            this.$notify({
                                message: message,
                                type: 'error'
                            })
                        }
                    })
                    .catch(() => {
                        this.loading = false
                    })
            },
        }
    }
</script>
<style lang="scss">
    .cur-left {
        width: 240px;
        position: absolute;

        .select-img {
            border-radius: 5px;
            border: 1px solid #e6e6e6;
            padding: 10px;
            text-align: center;


            .bg-gray {
                background-color: #f5f7fa;
                border-radius: 4px;
                padding: 55px 0;
                cursor: pointer;

                i {
                    font-size: 40px;
                    color: #ccd1d9
                }
            }
        }
    }

    .user-else-info {
        background-color: #f6f9fd;
        text-align: center;
        padding: 5px 0;

        .last-login {
            padding: 10px 0;
        }

        p {
            margin: 5px 0;
        }
    }

    .user-pic {
        width: 100%;
        height: 200px !important;
    }

    .cur-right {
        padding-left: 240px;
    }
</style>